<template>
	<view>
		<view class="list magrin_top">
			<text>头像</text>
			<view class="rigth" @click="handleAvatar">
				<view class="photo">
					<image :src="formData.avatorUrl||'/static/nameIcon/default.svg'" mode="widthFix"  ></image>
				</view>
	
				<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/rightIcon.png" mode=""
					class="more_icon"></image>
			</view>
		</view>
		<view class="line" />
		<view class="list">
			<text>姓名</text>
			<view class="rigth" @click="handleEditName">
				<text>{{formData.nickName}}</text>
				<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/rightIcon.png" mode=""
					class="more_icon"></image>
			</view>

		</view>
		<view class="line" />
		<view class="list">
			<text>身份</text>
			<view class="rigth">
				<text style="margin-right: 40rpx;">{{userTypeTextObj[formData.userType]}}</text>
			</view>
		</view>
		<view class="list magrin_top">
			<text>性别</text>
			<picker :range="sexRangeArrey" @change="changeSex" range-key='name'>
				<view class="rigth">
					<text>{{formData.sexName}}</text>
					<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/rightIcon.png" mode=""
						class="more_icon"></image>
				</view>
			</picker>
		</view>
		<view class="line" />
		<view class="list  ">
			<text>生日</text>
			<picker mode="date" @change="changeBirthDay">
			<view class="rigth">
				<text>{{formData.birthDay}}</text>
				<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/rightIcon.png" mode=""
					class="more_icon"></image>
			</view>
			</picker>
		</view>
		<view class="line" />
		<view class="list">
			<text>手机</text>
			<view class="rigth">
				<text style="margin-right: 40rpx;">{{formData.phone}}</text>
				<!-- <image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/rightIcon.png" mode=""
					class="more_icon"></image> -->
			</view>
		</view>
		<view class="line" />
		<view class="list" @click="handleJump">
			<text>实名认证</text>
			<view class="rigth">
				<text>{{formData.realNameFlag?'已实名':'未实名认证'}}</text>
				<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/rightIcon.png" mode=""
					class="more_icon"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive
	} from 'vue';
	import {
		userInfo,userUpdate
	} from './js/api.js';
	import http from '@/uitls/http.js';
	import {onShow} from '@dcloudio/uni-app'
	import {chooseImageFun} from '../../uitls/upload.js'
	const formData = reactive({
		nickName: '',
		phone: '',
		avatorUrl: '',
		birthDay: '',
		sex: '',
		sexName:'',
		userType:'',
		realNameFlag:'',
	})
	const sexRangeArrey = ref([{
			id: 1,
			name: '男'
		},
		{
			id: 0,
			name: '女'
		}
	])
	const userTypeTextObj = ref({
		1:'普通用户',
		2:'租户',
		3:'房东',
		4:'管理员'
	})
	const changeSex =(e)=>{
		console.log(e.detail.value)
		let index = e.detail.value
		formData.sexName= sexRangeArrey.value[index].name
		formData.sex= sexRangeArrey.value[index].id
		updateData({sex:formData.sex})
	}
	const changeBirthDay =(e)=>{
		console.log(e.detail.value)
		formData.birthDay = e.detail.value
		updateData({birthDay:formData.birthDay})
	}
	
	const getInfoData = async () => {
		let res = await userInfo()
		// console.log(res)
		let data = res.data.data
		// console.log(data)
		if (res.data.code == 0) {
			formData.avatorUrl = data.avatorUrl
			formData.phone = data.phone
			formData.nickName = data.nickName
			formData.birthDay = data.birthDay
			formData.sex = data.sex
			formData.sexName = data.sex == 1?'男':'女'
			formData.userType = data.userType
			formData.realNameFlag = data.realNameFlag
		}

	}
	
	const handleAvatar = async() => {
		let res = await chooseImageFun('avatar')
		if(res.imageUrl){
			formData.avatorUrl = res.imageUrl
			updateData({avatorUrl:res.imageUrl})
		}
	}
	//修改姓名
	const handleEditName = () => {
		uni.showModal({
			title: '修改姓名',
			content: userInfo.nickname || '',
			editable: true,
			placeholderText: '请输入姓名',
			success: (res) => {
				if (res.confirm && res.content.trim()) {
					formData.nickName = res.content.trim();
					updateData({nickName:formData.nickName})
				}
			}
		});
	}
	//修改接口
	const updateData = async(params)=>{
		let res = await userUpdate(params)
		if(res.data.code == 0){
			http.isMssage('修改成功')
		}
		// else{
		// 	http.isMssage(res.data.message)
		// }
	}
	const handleJump = ()=>{
		uni.navigateTo({
			url:'/pagesA/authentication/authentication?realNameFlag=' + formData.realNameFlag
		})
	}
	onMounted(() => {
		
	})
	onShow(()=>{
		getInfoData()
	})
</script>

<style>
	page {
		background: #F6F6F6 !important;
	}
</style>
<style lang="less" scoped>
	.list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		background: #ffffff;
		height: 90rpx;

		text {
			font-family: PingFangSC-Regular;
			font-size: 28rpx;
			color: #333333;
			font-weight: 400;
		}

		.rigth {
			display: flex;
			align-items: center;

			.photo {
				height: 60rpx;
				width: 60rpx;
				border-radius: 50%;
				// margin: 32rpx 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				overflow: hidden;
				background: #e3e4e5;
				image{
					width: 100%;
					
				}
			}

			.more_icon {
				margin-left: 24rpx;
				height: 34rpx;
				width: 20rpx;
			}
			text{
				min-width: 500rpx;
				text-align: right;
			}
		}

	}

	.line {
		background: #eeeeee;
		height: 1rpx;
		// width: 100%;
		margin: 0 30rpx;
	}

	.magrin_top {
		margin-top: 16rpx;
	}
</style>